<template>
  <van-card
    :num="mes.quantity"
    :price="mes.price"
    :desc="mes.enname || mes.name"
    :title="mes.name"
  >
    <template #thumb>
      <div class="thumb_img_box">
        <img :src="mes.image_url" :alt="mes.name" class="thumb_img" />
      </div>
    </template>
    <!-- <template #tags>
      <div class="rule">{{ mes.rule }}</div>
    </template> -->
  </van-card>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'

defineProps({
  mes: {
    type: Object as PropType<Record<string, any>>,
    default: () => {}
  }
})
</script>

<style lang="less" scoped>
.van-card {
  background-color: #fff;
}
.thumb_img_box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb_img {
  width: 100%;
}
:deep(.van-card__desc) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #999;
}
:deep(.van-card__title) {
  font-size: 14px;
}
.rule {
  color: #aaa;
}
:deep(.van-card__price) {
  color: rgb(12, 52, 186);
  font-weight: bold;
}
</style>
